<template>
  <div class="personal">
    <div class="user-center">
      <router-link class="user-info"  to="/userinfo" tag="div">
        <div class="user-avatar">
          <img src="../images/3.png" alt="">
        </div>
        <div class="user-name">15531378681</div>
        <i class="iconfont icon-shouji"></i>
      </router-link>
      <div class="user-order">
        <div class='order-top'>
          <h3>我的订单</h3>
          <a href="javascript:;">查看更多</a>
        </div>
        <div class="order-item">
          <a href="javascript:;">
            <i class="iconfont icon-tubiaolunkuo-"></i>
            <span>待付款</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-fenxiang"></i>
            <span>待分享</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-nodelivery"></i>
            <span>待发货</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-fahuo"></i>
            <span>待收货</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-pingjia"></i>
            <span>待评价</span>
          </a>
        </div>
      </div>
      <div class="user-menu">
        <a href="javascript:;">
          <i class="iconfont icon-youhuijuan"></i>
          <span>优惠卷</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-pingfenshoucang-"></i>
          <span>商品收藏</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-dianpu"></i>
          <span>店铺收藏</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-jiaoyin"></i>
          <span>历史浏览</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-shouhou"></i>
          <span>退款售后</span>
        </a>

      </div>
      <div class="user-setting">
        <a href="javascript:;">
          <i class="iconfont icon-hongbao_huabanfuben"></i>
          <span>新人红包</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-dizhi2"></i>
          <span>收货地址</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-pingjia"></i>
          <span>我的评价</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont icon-kefu"></i>
          <span>官方客服</span>
        </a>
        <router-link to="/setting" href="javascript:;">
          <i class="iconfont icon-shezhi"></i>
          <span>设置</span>
        </router-link>
      </div>
    </div>
    <div class="recommend-list">
      <div class="title">
        <i class="iconfont icon-jingxuanchanpin"></i>
        <span>精选推荐</span>
      </div>
      <RecommendList />
    </div>
  </div>
</template>

<script>
import RecommendList from '@/components/RecommendList'
export default {
  name: 'Personal',
  components: {
    RecommendList
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/mixins.styl'
.personal
  height: 100%
  width: 100%
  background #f5f5f5

  .user-info
    padding 20px
    display flex
    align-items center
    background #fff

    .user-avatar
      width 60px
      height 60px
      border-radius 50%
      overflow hidden
      margin-right 10px

      img
        width: 100%
        height: 100%
    .iconfont
      font-size 20px  
      color #12b7f6    

  .user-order
    padding 0 10px 10px 10px
    background #fff

    .order-top
      height 40px
      line-height 40px

      h3
        float left

      a
        float right
        text-decoration none
        color #ccc
        font-size 13px

    .order-item
      display flex
      justify-content space-around

      a
        flex 1
        display flex
        flex-direction column
        justify-content space-between
        align-items center
        text-decoration none

        i
          font-size 30px
          color: #ccc

        span
          color #333
          font-size 13px
          margin-top 15px

  .user-menu,
  .user-setting
    display flex
    padding 10px
    background #fff
    margin-top 15px

    a
      display flex
      flex 1
      flex-direction column
      justify-content cetner
      align-items center
      text-decoration none

      i
        font-size 30px
        color: #ccc

      span
        color #333
        font-size 13px
        margin-top 15px
  .user-menu
    a
      i
        color #e02e24
  .user-setting
    a
      i
        color #faa356
  .recommend-list
  
    .title
      width 100%
      display flex
      justify-content center
      align-items center
      height 30px
      color $pddRed
      background #fff
      margin-top 10px
      .iconfont
        font-size 25px
        margin-right 2px
        vertical-align top
      
</style>